require('./PageClsjEdit.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import { Control } from 'react-keeper'
import EngSelect from './../engselect'
import moment from 'moment';
import { Button,Page, Panel,PanelHeader, PanelBody, PanelFooter,ButtonArea, MediaBox,Cells,Checkbox,
  Cell,CellHeader,MediaBoxTitle,MediaBoxHeader,MediaBoxDescription,MediaBoxBody,MediaBoxInfo,Popup,PopupHeader,
  MediaBoxInfoMeta,Input,CellsTips,Icon,Label,CellsTitle,Toptips,Toast,Dialog,FooterLink,Article,Grids,
  CellBody,CellFooter, Form,FormCell,Radio,Gallery,GalleryDelete,Uploader,TextArea,SearchBar,PreviewItem} from  'react-weui/build/packages'
import AMap from './../../../components/amap'
import inputtp from './../../../assets/icon/输入.png';

class ClsjEdit extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showToast: false,
      showLoading: false,
      toastTimer: null,
      loadingTimer: null,

      showAndroid2: false,
      showAndroid3: false,
    }
    this.showLoading = this.showLoading.bind(this);
    this.hideDialog2 = this.hideDialog2.bind(this);
    this.hideDialog3 = this.hideDialog3.bind(this);


    this.goselecteng = this.goselecteng.bind(this);
    this.onEngFetch = this.onEngFetch.bind(this);
    this.setSelectEng = this.setSelectEng.bind(this);

    this.sgjdChange = this.sgjdChange.bind(this);
    this.tqqkChange = this.tqqkChange.bind(this);
    this.tqwdChange = this.tqwdChange.bind(this);
    this.jlrqChange = this.jlrqChange.bind(this);
    this.leftSelect = this.leftSelect.bind(this);
    this.rightSelect = this.rightSelect.bind(this);
    this.qkjlChange = this.qkjlChange.bind(this);
    this.qkjlBlur = this.qkjlBlur.bind(this);
    this.qkwtChange = this.qkwtChange.bind(this);
    this.qkwtBlur = this.qkwtBlur.bind(this);
    this.qklsChange = this.qklsChange.bind(this);
    this.qklsBlur = this.qklsBlur.bind(this);
    this.qkqtChange = this.qkqtChange.bind(this);
    this.qkqtBlur = this.qkqtBlur.bind(this);
    this.yjysRqChange = this.yjysRqChange.bind(this);
    this.yjysBlur = this.yjysBlur.bind(this);

    this.sqRqChange = this.sqRqChange.bind(this);
    this.sqBlur = this.sqBlur.bind(this);

    this.checkChange = this.checkChange.bind(this);

    this.saveInfo = this.saveInfo.bind(this);
    this.upInfo = this.upInfo.bind(this);
    this.goHome = this.goHome.bind(this);
    this.goList= this.goList.bind(this);
  }

  goList() {
     Control.go('/myyewu/rizhijllist',this.state.rzstore.currentEng);
  }

  goHome() {
    Control.go('/myyewu/rizhilist');
  }

  hideDialog2() {
    this.setState({showAndroid2: false});
  }

  hideDialog3() {
    this.setState({showAndroid3: false});
  }

  jlrqChange(e){
    console.log('jlrqChange');
    Actions.jlrqChange(e.target.value);
  }

  yjysRqChange(e){
    console.log('jlrqChange');
    Actions.yjysRqChange(e.target.value);
  }

  yjysBlur(e){
    console.log('jlrqChange');
    Actions.yjysBlur(e.target.value);
  }

  sqBlur(e){
    Actions.sqBlur(e.target.value);
  }

  sqRqChange(e){
    console.log('jlrqChange');
    Actions.sqRqChange(e.target.value);
  }

  checkChange(e){
    Actions.checkInfo(e);
  }


  saveInfo(){
     //this.showLoading();
    this.setState({showAndroid2: false,showAndroid3: false});
    Actions.saveInfo();
  }

  upInfo(){
    this.setState({showAndroid2: false,showAndroid3: false});
    Actions.upInfo();
  }

  showLoading() {
    this.setState({showLoading: true});

    this.state.loadingTimer = setTimeout(()=> {
      this.setState({showLoading: false});
    }, 2000);
  }



  sgjdChange(e){
    Actions.sgjdChange(e.target.value);
  }

  tqqkChange(e){
    Actions.tqqkChange(e.target.value);
  }

  tqwdChange(e){
    Actions.tqwdChange(e.target.value);
  }

  leftSelect(e){
    this.setState({bottom_show: false})
  }

  rightSelect(e){
    this.setState({bottom_show: false})
    Actions.checkChange();

  }

  qkjlChange(e){
    Actions.qkjlChange(e.target.value);
  }

  qkjlBlur(e){
    Actions.qkjlChange(e.target.value);
  }

  qkwtChange(e){
    Actions.qkwtChange(e.target.value);
  }

  qkwtBlur(e){
    Actions.qkwtChange(e.target.value);
  }

  qklsChange(e){
    Actions.qklsChange(e.target.value);
  }

  qklsBlur(e){
    Actions.qklsChange(e.target.value);
  }

  qkqtChange(e){
    Actions.qkqtChange(e.target.value);
  }

  qkqtBlur(e){
    Actions.qkqtChange(e.target.value);
  }

  goselecteng() {
    Control.go('/myyewu/engselect');
  }

  setSelectEng(obj) {
    console.log('返回');
    console.info(obj);
    Actions.setCurrentEng(obj);
  }

  onEngFetch(obj, callback) {
    console.info('engfetch');
  }

  render() {
    let t = this;
    console.log('设备安装');

    return (
      <div className="page aqedit">
        <div>1</div>
        <page>

            <Panel className="head-panel">
              <PanelHeader>
                <div className="title-bg"/>
                设备安装
              </PanelHeader>
              <PanelBody>
                <MediaBox type="appmsg">

                  <MediaBoxBody>
                    <MediaBoxTitle>
                      {this.state.rzstore.currentEng.engName}
                    </MediaBoxTitle>
                    <MediaBoxDescription>
                      <p style={{paddingTop:'5px'}}>{this.state.rzstore.currentEng.engJsdw}</p>
                      <p style={{paddingTop:'5px'}}>{ new Date(this.state.rzstore.jlmode.jlrq).toLocaleString() }</p>

                    </MediaBoxDescription>
                  </MediaBoxBody>
                  <CellFooter  style={{position: 'relative', marginRight: '10px'}}>
                    <img src={inputtp} alt="" style={{display: `block`, width: `20px`, marginRight: `5px`}}/>
                  </CellFooter>
                </MediaBox>
              </PanelBody>
              <PanelFooter>
                <Cell access link onClick={e=>{
                  if(!this.state.rzstore.isUpload)
                  {
                    this.refs.engselect.getCurrentEng()
                  }
                }}>
                  <CellBody/>
                  <CellFooter><h5>选择工程</h5></CellFooter>
                </Cell>
              </PanelFooter>


            </Panel>



          <Panel>
            <PanelHeader>
              验收项目
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                    <TextArea placeholder="请输入" onChange={this.sgjdChange} showCounter={false}
                              value={this.state.rzstore.jlmode.ysxmmc}   rows="2"
                              readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>



            <PanelHeader>
              申请时间
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                    {/*<p style={{paddingTop:'5px'}}>{ new Date(this.state.rzstore.jlmode.sqsj).toLocaleString() }</p>*/}
                    <Input type="date" defaultValue={this.state.rzstore.jlmode.sqsj}
                           Value={this.state.rzstore.jlmode.sqsj} onBlur={this.sqBlur}
                           onChange={this.sqRqChange}/>

                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>

            <PanelHeader>
              预计验收时间
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>

                    <Input type="date" defaultValue={this.state.rzstore.jlmode.yjyssj}
                           Value={this.state.rzstore.jlmode.yjyssj} onBlur={this.yjysBlur}
                           onChange={this.yjysRqChange}/>

                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>

            <PanelHeader>
              监督人员
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody >

                    <p>{this.state.rzstore.jlmode.zjy}</p>

                    <Popup
                      show={this.state.bottom_show}
                      onRequestClose={e=>this.setState({bottom_show: false})}
                    >
                      <PopupHeader
                        left="取消"
                        right="确定"
                        leftOnClick={this.leftSelect}
                        rightOnClick={this.rightSelect}
                      />
                      <Form checkbox>
                      {
                        this.state.rzstore.jdy.length > 0 ?
                          this.state.rzstore.jdy.map((item,i)=>{
                            return (
                              <FormCell checkbox >
                                <CellHeader>
                                  <Checkbox name={item.name} value={item.emplId}  onChange={this.checkChange}  />
                                </CellHeader>
                                <CellBody>{item.name}</CellBody>
                              </FormCell>
                            )
                          })
                          : <MediaBox>未找到数据！</MediaBox>
                      }
                    </Form>
                    </Popup>
                  </CellBody>
                  <CellFooter access link onClick={e=>this.setState({bottom_show: true})} >
                      选择
                  </CellFooter>
                </Cell>
              </MediaBox>
            </PanelBody>


            <PanelHeader>
              备注
            </PanelHeader>
            <PanelBody>
              <MediaBox type="small_appmsg">
                <Cell>
                  <CellHeader>
                    <img src={inputtp}
                         style={{
                           width: '20px',
                           marginRight: '5px',
                           display: 'block'
                         }}/>
                  </CellHeader>
                  <CellBody>
                        <TextArea placeholder="请输入" onChange={this.qkqtChange} showCounter={false}
                                  value={this.state.rzstore.jlmode.bz}  rows="3"
                                  onBlur={this.qkqtBlur}
                                  readOnly={this.state.rzstore.isUpload} maxlength="200"></TextArea>
                  </CellBody>
                </Cell>
              </MediaBox>
            </PanelBody>

            <PanelBody>
                  <ButtonArea direction="horizontal" className= {this.state.rzstore.isNew ? 'edithide' : 'editshow'}>
                    <Button type="warn" onClick={ e=> this.setState({ showAndroid3: true}) }
                            disabled={this.state.rzstore.isUpload}
                            className= {this.state.rzstore.isNew ? 'edithide' : 'editshow' } > 提交</Button>
                    <Button type="primary" onClick={ e=> this.setState({ showAndroid2: true}) }
                            disabled={this.state.rzstore.isUpload}
                            className= {this.state.rzstore.isNew ? 'editshow' : 'editshow' } >保存</Button>
                  </ButtonArea>
                  <div className= {this.state.rzstore.isNew ? 'editshow' : 'edithide'}>
                    <Button type="primary" onClick={ e=> this.setState({ showAndroid2: true}) }
                            disabled={this.state.rzstore.isUpload}
                              >保存</Button>
                  </div>
                    <Dialog type="android" title={'操作'}  show={this.state.showAndroid2}
                            buttons={[
                              {
                                type: 'default',
                                label: '取消',
                                onClick: this.hideDialog2
                              },
                              {
                                type: 'primary',
                                label: '确定',
                                onClick: this.saveInfo
                              }
                            ]}
                    >
                      是否保存?
                    </Dialog>
                      <Dialog type="android" title={'操作'}  show={this.state.showAndroid3}
                              buttons={[
                                {
                                  type: 'default',
                                  label: '取消',
                                  onClick: this.hideDialog3
                                },
                                {
                                  type: 'primary',
                                  label: '确定',
                                  onClick: this.upInfo
                                }
                              ]}
                      >
                      是否提交?(提交成功后无法更改数据)
                    </Dialog>



              <AMap ref="amap" onSetPosition={this.setPosition} position={this.state.rzstore.position}></AMap>
              <EngSelect ref="engselect" onSelectEng={this.setSelectEng} currentEng={this.state.rzstore.currentEng}></EngSelect>
              <Toast icon="loading" show={this.state.showLoading}>保存中...</Toast>
              <Toptips type="warn" show={this.state.rzstore.showWarn} className="warn-div">
                  <Icon value="warn"/>{this.state.rzstore.warnMessage}
              </Toptips>

              </PanelBody>
{/*              <PanelFooter>
                <Cell access link onClick={this.goList}>
                  <CellBody>
                    <div style={{textAlign:'center'}}>查看更多...</div>
                  </CellBody>
                </Cell>
              </PanelFooter>*/}

            </Panel>
        </page>
      </div>
    );
  }


  notice() {
  }


  componentWillMount() {
    let t = this;
    if(Control.state){
      console.log('有值');
      Actions.loadMode(Control.state);
    }
    else
    {
      console.log('无值');
      Actions.initMode();
    }

  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    const thisProps = this.props || {},
      thisState = this.state.jlmode || {};

    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key] || !is(thisProps[key], nextProps[key])) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key] || !is(thisState[key], nextState[key])) {
        return true;
      }
    }
    return false;
  }
}

ClsjEdit.propTypes = {
  pmode: React.PropTypes.object.isRequired,
  peng: React.PropTypes.object.isRequired,
  imgls: React.PropTypes.object.isRequired,
  router: React.PropTypes.object.isRequired,
  location: React.PropTypes.object.isRequired,
  urlShow: React.PropTypes.object.isRequired,
}

ReactMixin.onClass(ClsjEdit, Reflux.connect(Store, 'rzstore'));


export default ClsjEdit ;
